/* creates an on hover textbubble, the contents of either determined by a jquery selector, or the attribute "bubble" */
var HoverBubble = {
	init:function(args){ 
		if(args === undefined){
			var args = {};
			args.$elements = $('[bubble]');
		}
		
		var $elements = args.$elements; // jquery selector of elements to activate
		var $contents = args.$contents; // jquery selector for the html contents to display in bubble. 
		//if $contents undefined, will use the bubble attribute on parent element
		//if bubble attribute is undefined, it will attempt to use the title attribute
		
		var callback = args.callback; // a function to call on hover. Presumably to change the $contents
		// callback's args include the jquery object in question callback($this)
		var callmouseout = args.callmouseout;
		var maxWidth = args.maxWidth || "400px";
		
		// make sure bubble interface doesn't already exist
		$('#hoverBubble').remove();
		// create and insert the bubble interface on page.
		HoverBubble.$bubble = $('<div id="hoverBubble"><div id="hoverBubbleContent"></div></div>');
		HoverBubble.$wedge = $('<div id="hoverBubbleWedge"></div>');
		// add styling
		HoverBubble.$bubble.css({
			position:"fixed",
			zIndex:"10000",
			padding:"4px 8px",
			borderRadius:"2px",
			backgroundColor:"#5BCDC1",
			color:"white",
			top:"100px",
			left:"100px",
			fontSize:"10px",
			boxShadow:"2px 2px 4px #999999",
			display:"none",
			minWidth:"65px",
			minHeight:"13px",
			maxWidth:maxWidth,
			textShadow:'#C3C3C3'
		});
		HoverBubble.$wedge.css({
			width:"0px",
			height:"0px",
			borderLeft:"7px solid transparent",
			borderRight:"7px solid transparent",
			borderTop:"9px solid #5BCDC1",
			position:"absolute",
			bottom:"-9px",
			right:"50%",
			zIndex:"10000"
		});
		// create structure
		HoverBubble.$bubble.append(HoverBubble.$wedge);
		$('body').append(HoverBubble.$bubble);
		// initiate hover
		$elements.unbind('mouseenter.hoverBubble').bind('mouseenter.hoverBubble',function(){
			HoverBubble.show($(this),$contents,callback);
		});
		$elements.unbind('mouseleave.hoverBubble').bind('mouseleave.hoverBubble',function(){
			HoverBubble.hide($(this),callmouseout);
		});
	},
	show:function($this,$contents,callback){
		if(typeof callback == "function"){
			callback($this);
		}
		HoverBubble.getContent($this,$contents);
		HoverBubble.position($this);
		HoverBubble.$bubble.stop().fadeIn();
	},
	hide:function($this,callmouseout){
		if(typeof callmouseout == "function"){
			callmouseout($this);
		}
		HoverBubble.$bubble.stop().fadeOut();
	},
	getContent:function($this,$contents){
		var $content = $contents;
		// handle undefined contents
		if($content === undefined){
			var text = $this.attr('bubble') || "";
			if(text == ""){
				text = $this.attr('title') || "";
				// prevent title and hoverBubble from appearing at same time.
				$this.attr('bubble',$this.attr('title'));
				$this.removeAttr('title');
			}

			$content = $('<div>'+text+'</div>');
		}
		$('#hoverBubbleContent').html($content.clone().attr('id','justacopy').html());
	},
	position:function($this){ // position bubble
		// calculate width
		var bubble_width = HoverBubble.$bubble.outerWidth();
		var this_width = $this.outerWidth();
		var average_left = (this_width - bubble_width) / 2;
		// calculate bubble height
		var bubble_height = HoverBubble.$bubble.outerHeight() + 11;
		var top = $this.offset().top - $(window).scrollTop() - bubble_height;
		var left = $this.offset().left - $(window).scrollLeft() + average_left;
		HoverBubble.$bubble.css({left:left,top:top});
		// now, calculate the wedge left position
		var wedge_left = (bubble_width / 2) - 7;
		HoverBubble.$wedge.css({left:wedge_left+'px'});
	}
};
$(document).ready(function(){
	HoverBubble.init({
		$elements:$('[bubble]')
	});
});